<template>
	<view class="reminder">
		<view class="reminder-content">
			<view class="reminder-text-wrapper">
				<text class="welcome-text" @touchstart="handleTouchStart" @touchend="handleTouchEnd" @touchcancel="handleTouchEnd">欢迎使用{{ title }}自助服务系统</text>
				<view class="divider">
					<view class="line"></view>
					<view class="circle"></view>
					<view class="line"></view>
				</view>
			</view>
		</view>
		<view class="reminder-decoration-corner top-left"></view>
		<view class="reminder-decoration-corner top-right"></view>
		<view class="reminder-decoration-corner bottom-left"></view>
		<view class="reminder-decoration-corner bottom-right"></view>
		<view class="reminder-glow"></view>
		<view class="reminder-flower left-center">❀</view>
		<view class="reminder-flower right-center">❀</view>
	</view>
</template>
<script setup>
	// 引入electron
	const { ipcRenderer } = require('electron');
	//
	const props = defineProps({
		title: {
			type: String,
			default: '永恒纪念园',
		},
		subtitle: {
			type: String,
			default: '致敬逝者 慰藉生者',
		},
	});

	// 获取当前公司信息
	const title = computed(() => useCompanyStore().GetCurCompanyInfo().bs);

	// 监听公司信息变化
	watch(title, (newVal) => {
		props.title = title;
	});

	// 长按退出功能 - 使用touchstart/touchend实现
	let pressTimer = null;

	const requiredPressTime = 5000; // 5秒

	/**
	 * 长按退出功能
	 * @param {*} e
	*/
	const handleTouchStart = (e) => {
		console.log('touchstart触发');
		// 清除可能存在的旧计时器
		if (pressTimer) {
			clearTimeout(pressTimer);
		}

		// 设置新的计时器
		pressTimer = setTimeout(() => {
			console.log('长按5秒触发');
			exitSystem();
		}, requiredPressTime);
	};

	/**
	 * 长按退出功能
	 * @param {*} e
	*/
	const handleTouchEnd = () => {
		console.log('touchend触发');
		// 如果用户提前松开，取消退出
		if (pressTimer) {
			clearTimeout(pressTimer);
			pressTimer = null;
		}
	};

	/**
	 * 退出系统
	*/
	const exitSystem = () => {
		// 退出系统的逻辑
		uni.showToast({
			title: '系统即将退出',
			icon: 'none',
			duration: 1500,
		});

		// 延迟一点时间后退出，让用户看到提示
		setTimeout(async () => {
			const moadl = await uni.showModal({
				title: '提示',
				content: '是否确认退出系统？',
				success: (res) => {
					if (res.confirm) {
						ipcRenderer.invoke('quitApp');
					}
				},
			});
		}, 1500);
	};

	// 在mounted钩子中添加事件监听
	onMounted(() => {
		console.log('组件已挂载，准备长按检测');

		// 可以添加调试信息，确认事件是否正常注册
		const element = document.querySelector('.welcome-text');
		if (element) {
			element.addEventListener('mousedown', () => console.log('mousedown触发'));
			element.addEventListener('mouseup', () => console.log('mouseup触发'));
		}
	});
</script>

<style lang="scss" scoped>
	// 温馨提醒区域
	.reminder {
		width: 100%;
		height: 80px;
		background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
		border-radius: 15px;
		margin-bottom: 15px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10px);
		overflow: hidden;
		transition: all 0.4s ease;

		&:hover {
			box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
			transform: translateY(-3px);

			.welcome-text {
				text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
				color: #1a2c3d;
			}

			.reminder-glow {
				opacity: 0.8;
				transform: scale(1.1);
			}

			.reminder-decoration-corner {
				border-color: rgba(108, 142, 175, 0.6);
				width: 28px;
				height: 28px;
			}
		}

		.reminder-content {
			width: 90%;
			height: 85%;
			border-radius: 12px;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 2;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				top: -5px;
				left: -20px;
				width: 40px;
				height: 40px;
				background: radial-gradient(circle, rgba(108, 142, 175, 0.1) 0%, transparent 70%);
				z-index: -1;
			}

			&::after {
				content: '';
				position: absolute;
				bottom: -5px;
				right: -20px;
				width: 40px;
				height: 40px;
				background: radial-gradient(circle, rgba(108, 142, 175, 0.1) 0%, transparent 70%);
				z-index: -1;
			}

			.reminder-text-wrapper {
				text-align: center;
				position: relative;

				&::before,
				&::after {
					content: '';
					position: absolute;
					width: 20px;
					height: 1px;
					background: linear-gradient(90deg, transparent, rgba(108, 142, 175, 0.5), transparent);
					top: 50%;
					transform: translateY(-50%);
				}

				&::before {
					left: -40px;
				}

				&::after {
					right: -40px;
				}

				.welcome-text {
					font-size: 24px;
					color: #2c3e50;
					position: relative;
					font-weight: 600;
					letter-spacing: 1px;
					transition: all 0.4s ease;

					/* 调整渐变色范围和对比度 */
					background-image: linear-gradient(45deg, #1a2c3d 0%, #3498db 25%, #2ecc71 50%, #3498db 75%, #1a2c3d 100%);
					background-size: 300% auto; // 增加渐变范围
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
					text-fill-color: transparent;

					/* 加快动画速度并使用 ease-in-out 使过渡更流畅 */
					animation: gradientMove 4s ease-in-out infinite;

					/* 悬停时加快动画 */
					&:hover {
						animation-duration: 2s;
					}
				}

				.divider {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 8px 0;
					position: relative;

					.line {
						width: 60px;
						height: 1px;
						background: linear-gradient(to right, transparent, #6c8eaf 50%, transparent);
						opacity: 0.6;
						transition: all 0.3s ease;
					}

					.circle {
						width: 6px;
						height: 6px;
						border-radius: 50%;
						background: linear-gradient(45deg, #6c8eaf, #3498db);
						margin: 0 10px;
						box-shadow: 0 0 15px rgba(108, 142, 175, 0.5);
						animation: pulse 2s infinite;
					}
				}
			}
		}
	}

	.reminder-decoration-corner {
		position: absolute;
		width: 25px;
		height: 25px;
		border-color: rgba(108, 142, 175, 0.4);
		border-style: solid;
		border-width: 0;
		pointer-events: none;
		transition: all 0.4s ease;

		&.top-left {
			top: 8px;
			left: 8px;
			border-top-width: 2px;
			border-left-width: 2px;
			border-radius: 5px 0 0 0;
		}

		&.top-right {
			top: 8px;
			right: 8px;
			border-top-width: 2px;
			border-right-width: 2px;
			border-radius: 0 5px 0 0;
		}

		&.bottom-left {
			bottom: 8px;
			left: 8px;
			border-bottom-width: 2px;
			border-left-width: 2px;
			border-radius: 0 0 0 5px;
		}

		&.bottom-right {
			bottom: 8px;
			right: 8px;
			border-bottom-width: 2px;
			border-right-width: 2px;
			border-radius: 0 0 5px 0;
		}
	}

	.reminder-line-decoration {
		position: absolute;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(108, 142, 175, 0.5), transparent);
		width: 80%;
		left: 10%;
		transition: all 0.4s ease;

		&.top {
			top: 15px;
		}

		&.bottom {
			bottom: 15px;
		}
	}

	.reminder-glow {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
		opacity: 0.5;
		pointer-events: none;
		animation: glow 4s ease-in-out infinite;
	}

	// 新增装饰元素
	.reminder-flower {
		position: absolute;
		font-size: 16px;
		color: rgba(108, 142, 175, 0.6);
		z-index: 1;
		text-shadow: 0 0 8px rgba(108, 142, 175, 0.3);
		animation: flowerFloat 4s ease-in-out infinite;
		transition: all 0.4s ease;

		&.left-center {
			left: 10px;
			top: 50%;
			transform: translateY(-50%);
		}

		&.right-center {
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
		}

		&:hover {
			color: rgba(108, 142, 175, 0.8);
			text-shadow: 0 0 12px rgba(108, 142, 175, 0.5);
		}
	}

	@keyframes glow {
		0%,
		100% {
			opacity: 0.5;
			transform: scale(1) rotate(0deg);
		}
		50% {
			opacity: 0.8;
			transform: scale(1.15) rotate(5deg);
		}
	}

	@keyframes pulse {
		0%,
		100% {
			transform: scale(1);
			opacity: 0.7;
			box-shadow: 0 0 15px rgba(108, 142, 175, 0.4);
		}
		50% {
			transform: scale(1.3);
			opacity: 1;
			box-shadow: 0 0 25px rgba(108, 142, 175, 0.6);
		}
	}

	// 修改渐变动画关键帧
	@keyframes gradientMove {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}

	// 添加装饰符号的浮动动画
	@keyframes floatSymbol {
		0%,
		100% {
			transform: translateY(-50%) rotate(0deg);
			opacity: 0.8;
		}
		50% {
			transform: translateY(-50%) rotate(180deg);
			opacity: 1;
		}
	}

	// 更新为更适合花朵的柔和动画
	@keyframes gentleFloatPulse {
		0%,
		100% {
			transform: translateY(-50%) scale(1) rotate(0deg);
			opacity: 0.9;
		}
		50% {
			transform: translateY(-50%) scale(1.15) rotate(5deg);
			opacity: 1;
		}
	}

	@keyframes flowerFloat {
		0%,
		100% {
			transform: translateY(-50%) scale(1) rotate(0deg);
		}
		50% {
			transform: translateY(-50%) scale(1.2) rotate(15deg);
		}
	}
</style>
